saltgui_preview_grains: Improvement - #605

@sasha-simplyture
I see a few possible solutions:

1. see whether the jsonpath system allows list of strings to be joined somehow.
   I'll investigate this later and see what is possible; or
2. present all your data not as JSON, but as YAML or NESTED
   by updating the setting described in https://github.com/erwindon/SaltGUI?tab=readme-ov-file#output
   I'll test this later and see whether it is actually an improvement (and working at all); or
3. I can update the grains-preview code to allow operators that simplify the outcome

Thank you @erwindon for your quick response, I've set saltgui_output_formats: doc,highstate,yaml and now it looks almost perfect for me (not enough width for words):

salt-master-custom.conf:
...
saltgui_preview_grains:
  - Roles=roles

In your case, the Roles2+Roles3 columns also take space and to the right there is also the jobs-summary table.
So in tight situations, the outcome is always a bit uncertain.

When you rename your roles so that they have no "-" in their name, this may improve.
Suggestions are to replace it with "_" (underscore); or remove it completely.
But ultimately even the non-breaking-space between the "-" and the item will still line-break when there just is no room.

Alternatively, we can update the first css class in grains.css. Just add "word-break: keep-all;" there. please try that too.

Switching from - to _ didn't help, but changing Grains.css worked fine:

saltgui/static/stylesheets/grains.css:
td.grain-value {
  word-break: keep-all;
}

#page-grains {
  width: 100%;
}

Should I create PR for these changes or you will or you think of doing something else? @erwindon

should I create PR for these changes or you will or you think of doing something else?

I just converted this github-issue to a github-pr which is connected to my own branch for this.
when you switch your branch to this one, you should see the same code.
(well almost, because I added a css clause and you replaced the existing one)
I don't want to break anything, so I have a few tests to perform.
that will take a couple of days...

But wait, with white-space: pre-wrap; grains look bad:

td.grain-value {
  white-space: pre-wrap;
  word-break: keep-all; 
}

I guess you need to keep only word-break: keep-all; ...

thx for that info!
I'll have to test the many combinations of:

• the locations that use this CSS; and
• the different variations of the possible data; and
• all 3 representations (nested/json/yaml).

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

FYI: the css class grain-value is only used on the grains-overview page and the grains-per-minion page.

I guess you need to keep only word-break: keep-all; ...

for tight spaces that indeed behaves just a bit better for yaml output.
but it also removes all indentation when using the (default) json output, and that is worse.
so, I'm keeping the current PR unchanged.
do you see any further bad side-effects?

There are no bad side-effects, just a better visual view.

thx!